<#include "/page/front/common/_layout.html"/>
<@html title="发布话题 - ${siteTitle!}" description="发布话题" sidebar_create_info="show" page_tab="topic" sidebar_md_help="show">
<link rel="stylesheet" href="${baseUrl!}/static/bootstrap/css/jquery-ui.css"/>
<link rel="stylesheet" href="${baseUrl!}/static/wangEditor/css/wangEditor.css">
<script src="${baseUrl!}/static/bootstrap/js/jquery-ui.js"></script>
<script src="${baseUrl!}/static/wangEditor/js/wangEditor.js"></script>
<script src="${baseUrl!}/static/plupload/js/plupload.full.min.js"></script>

<div class="panel panel-default">
    <div class="panel-heading">
        <ol class="breadcrumb">
            <li><a href="${baseUrl!}/">首页</a></li>
            <li class="active">发布话题</li>
        </ol>
    </div>
    <div class="panel-body">
        <form id="create_form" action="${baseUrl!}/topic/save" method="post">
            <select name="sid" id="sid" class="form-control" style="width: 20%; margin-bottom: 5px;">
                <#list sections as section>
                    <option value="${section.id}">${section.name}</option>
                </#list>
            </select>
            <div id="labels"></div>
            <input type="hidden" name="label" value=""/>
            <input type="text" class="form-control" id="label" style="width: 40%;margin-bottom: 5px; display: inline-block;" placeholder="标签"/>
            <input type="button" class="btn btn-default btn-sm" onclick="addLabel()" value="添加">
            <input type="text" placeholder="标题字数10字以上" id="title" name="title" class="form-control"
                   style="margin-bottom: 5px;"/>
            <input type="text" placeholder="原文地址（原创可不写）" id="original_url" name="original_url" class="form-control"
                   style="margin-bottom: 5px;"/>
            <div style="margin-bottom: 5px;">
                <textarea id="content" name="content" class="form-control" style="height: 400px;"></textarea>
            </div>
            <input type="button" onclick="submitForm()" value="提  交" class="btn btn-default btn-sm">

            <div id="preview_content" class="hidden"></div>
        </form>
    </div>
    <div id="uploadContainer">
        <input type="button" value="选择文件" id="btnBrowse"/>
        <input type="button" value="上传文件" id="btnUpload">
        <ul id="fileList"></ul>
    </div>
</div>
<script type="text/javascript">
    function submitForm() {
        //将标签格式化放入隐藏表单里
        var labelName = '';
        $("#labels span").each(function (i, item) {
            labelName += $(this).attr("name") + ",";
        });
        $("input[name='label']").val(labelName);
        if ($.trim($("#title").val()) == "") {
            alert("标题不能为空");
            $("#title").focus();
        } else if ($.trim($("#content").val()) == "") {
            alert("内容不能为空");
        } else {
            $("#create_form").submit();
        }
    }

    $(function () {
        $( "#label" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "${baseUrl!}/label/search",
                    dataType: "json",
                    data: {
                        q: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                if($("#labels span").size() >= 5) {
                    alert("每个话题最多添加5个标签");
                } else {
                    appendLabel(ui.item.label);
                }
                $("#label").val("");
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });

        //==========wangEditor Start============

        //获取dom节点
        var $uploadContainer = $('#uploadContainer'),
                $fileList = $('#fileList'),
                $btnUpload = $('#btnUpload');

        var editor = $('#content').wangEditor({
            //重要：传入 uploadImgComponent 参数，值为 $uploadContainer
            uploadImgComponent: $uploadContainer,
            pasteUrl: '${baseUrl!}/pasteupload'
        });

        //实例化一个上传对象
        var uploader = new plupload.Uploader({
            browse_button: 'btnBrowse',
            url: '${baseUrl!}/upload',
            flash_swf_url: 'plupload/Moxie.swf',
            sliverlight_xap_url: 'plupload/Moxie.xap',
            filters: {
                mime_types: [
                    //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
                    { title: "图片文件", extensions: "jpg,gif,png,bmp" }
                ]
            }
        });

        //存储多个图片的url地址
        var urls = [];

        //重要：定义 event 变量，会在下文（触发上传事件时）被赋值
        var event;

        //初始化
        uploader.init();

        //绑定文件添加到队列的事件
        uploader.bind('FilesAdded', function (uploader, files) {
            //显示添加进来的文件名
            $.each(files, function(key, value){
                var fileName = value.name,
                        html = '<li>' + fileName + '</li>';
                $fileList.append(html);
            });
        });

        //单个文件上传之后
        uploader.bind('FileUploaded', function (uploader, file, responseObject) {
            //从服务器返回图片url地址
            var url = responseObject.response;
            //先将url地址存储来，待所有图片都上传完了，再统一处理
            urls.push(url);
        });

        //全部文件上传时候
        uploader.bind('UploadComplete', function (uploader, files) {
            // 用 try catch 兼容IE低版本的异常情况
            try {
                //打印出所有图片的url地址
                $.each(urls, function (key, value) {
                    //重要：调用 editor.command 方法，把每一个图片的url，都插入到编辑器中
                    //重要：此处的 event 即上文定义的 event 变量
                    editor.command(event, 'insertHTML', '<img src="' + value + '"/>');
                });
            } catch (ex) {
                // 此处可不写代码
            } finally {
                //清空url数组
                urls = [];

                //清空显示列表
                $fileList.html('');
            }
        });

        //上传事件
        $btnUpload.click(function(e){
            //重要：将事件参数 e 赋值给 上文定义的 event 变量
            event = e;
            uploader.start();
        });

        //==========wangEditor End============
    });

    function addLabel() {
        if($("#labels span").size() >= 5) {
            alert("每个话题最多添加5个标签");
        } else {
            if($.trim($("#label").val()).length > 0) {
                appendLabel($('#label').val());
            }
        }
        $('#label').val('');
        $('#label').focus();
    }

    function appendLabel(labelName) {
        $("#labels").append('<span class="label label-info label-item" name="'+labelName+'">'+labelName+'<a href="javascript:;" onclick="$(this).parents(\'.label\').remove();">&nbsp;x</a></span>');
    }
</script>
</@html>